import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Input from '../../ch/components/Input.vue'

<Meta
  title="Components/Form/Input"
  component={Input}
  argTypes={{
    type: {
      control: {
        type: 'select',
        options: [
          'color',
          'date',
          'datetime-local',
          'email',
          'file',
          'month',
          'number',
          'password',
          'range',
          'search',
          'tel',
          'text',
          'time',
          'url',
          'week',
          'submit',
        ],
      },
    },
    required: { control: { type: 'boolean' } },
    size: { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    variant: { control: { type: 'select', options: ['outline', 'negative'] } },
    label: {},
    hideLabel: { control: { type: 'boolean' } },
    message: {},
    messageType: {
      control: {
        type: 'select',
        options: ['error', 'warning', 'success', 'info'],
      },
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Input },
  template:
    '<Input :type="type" :required="required" :variant="variant" :size="size" :label="label" :hideLabel="hideLabel" :placeholder="placeholder" :value="value" :id="id" :min="min" :max="max" :step="step" :message="message" :messageType="messageType" />',
})

# Input

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      type: 'outline',
      size: 'base',
      label: 'Label',
      hideLabel: false,
      placeholder: 'Placeholder',
      value: undefined,
      id: 'my-id',
      min: undefined,
      max: undefined,
      step: undefined,
      message: undefined,
      messageType: 'error',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Input negative variant

- `input--negative` for standard buttons on dark background

<Canvas style={{ backgroundColor: '#2f4356' }}>
  <input class="input--negative input--base" value="Input text" />
</Canvas>

## Input disabled state

- `input--disabled` or `disabled state on the input` to add the disabled style

<Canvas>
  <input class="input--outline input--base" disabled value="Input text" />
  <input class="input--negative input--base" disabled value="Input text" />
</Canvas>

## Sizes

For size variations, the following css classes are built:

- `input--sm` for small inputs
- `input--base` for standard size
- `input--lg` for large inputs

<Canvas>
  <input class="input--outline input--sm" value="input--sm" />
  <input class="input--outline input--base" value="input--base" />
  <input class="input--outline input--lg" value="input--lg" />
</Canvas>

## Required field

If the field is mandatory:

- a `required` attribute is added to the input element.
- an asterisk is displayed right after the label. This can be done by adding a `text--asterisk` class on the label element.
- the word “required“ is added to the label for screen readers. This can be done by adding a sr-only class on the legend element.

<Canvas>
  <div class="form__group__input">
    <label for="my-id" class="text--base text--asterisk">
      Name <span class="sr-only">required</span>
    </label>
    <input
      type="text"
      id="my-id"
      name="my-id"
      placeholder="Placeholder"
      class="input--outline input--base"
      required
    />
  </div>
</Canvas>

## Messages

If the field has error, an `input--error` class is added to the input element. Additionally
a `badge badge--sm badge--error` element wraps the error message, right after the input element:

<Canvas>
  <div class="form__group__input">
    <label for="my-id" class="text--base text--asterisk">
      Name <span class="sr-only">required</span>
    </label>
    <input
      type="text"
      id="my-id"
      name="my-id"
      placeholder="Placeholder"
      class="input--outline input--base input--error"
      required
    />
    <div class="badge badge--sm badge--error">This field is required</div>
  </div>
</Canvas>
